<template>
  <div>
    <div class="info-bar_2">
      <van-nav-bar
        title="账户设置"
        :border="false"
        left-text="个人信息"
        left-arrow
        @click-left="onClickLeft"
        @click-right="showShare = true"
      >
        <template #right>
          <van-icon class="emspss" name="ellipsis" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="Head_area">
        <div class="top_ar">
          <van-uploader
            :after-read="afterRead"
            :before-read="beforeRead"
            v-model="fileList"
            multiple
            :preview-full-image="false"
            :max-count="1"
            class="loadherad"
          >
            <van-image :src="info.userImg" class="imgs">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </van-uploader>

          <p>更换头像</p>
        </div>
        <div class="userInfo">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">乐淘账户</span>
              <span class="userAccount copy">{{ info.Account }}</span>
            </template>
            <template #right-icon>
              <van-icon @click="copy" style="font-size: 19px" name="coupon-o" />
            </template>
          </van-cell>
          <van-cell is-link @click="dialogshow = true">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">乐淘昵称</span>
              <span class="userAccount">{{ info.Nickname }}</span>
            </template>
          </van-cell>
          <van-cell is-link @click="sheetshow = true">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">个人性别</span>
              <span v-if="info.Gender === ''" class="userAccount"
                >未选择性别</span
              >

              <span v-else class="userAccount">{{ info.Gender }}</span>
              <img
                v-if="info.Gender === '男'"
                class="Gender"
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/box_icon.png"
                alt=""
              />
              <img
                v-if="info.Gender === '女'"
                class="Gender"
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/girl_icon.png"
                alt=""
              />
            </template>
          </van-cell>
          <van-cell is-link @click="calendarshow = true">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">我的生日</span>
              <!-- <span v-if="info.Birthday === null" class="userAccount"
                >未选择生日</span
              > -->
              <span class="userAccount">{{
                info.Birthday === "" ? "未选择生日" : info.Birthday
              }}</span>
            </template>
          </van-cell>
          <van-cell is-link @click="popupshow = true">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">个性签名</span>
              <!-- <span v-if="info.Signature === ''" class="userAccount"
                >未定义签名</span
              > -->
              <span class="userAccount">{{
                info.Signature === null ? "未定义签名" : info.Signature
              }}</span>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
    <!-- 修改昵称的dialog -->
    <van-dialog
      v-model="dialogshow"
      @confirm="Confirmation"
      title="修改昵称"
      show-cancel-button
      :before-close="onBeforeClose"
    >
      <div class="editnamebox">
        <van-field
          :clearable="true"
          v-model="useName"
          placeholder="请输入用户名"
        />
        <p class="name_tip">昵称只能大于等于四个字符到6个字符</p>
      </div>
    </van-dialog>
    <!-- end修改昵称的dialog -->
    <!-- 展示分享面板 -->
    <div class="shares">
      <van-share-sheet
        v-model="showShare"
        :options="options"
        @select="onSelect"
      />
    </div>
    <!-- end展示分享面板 -->
    <!-- 修改用户性别 -->
    <van-action-sheet
      v-model="sheetshow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onChangesex"
    />
    <!-- end修改用户性别 -->

    <!-- 修改日期 -->
    <van-calendar v-model="calendarshow" @confirm="onConfirm" />
    <!-- end修改日期 -->

    <!-- 编辑签名 -->
    <van-popup
      v-model="popupshow"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="Signaturebox">
        <van-field
          v-model="info.Signature"
          rows="2"
          autosize
          label="留言"
          type="textarea"
          maxlength="20"
          placeholder="请设置您的签名"
          show-word-limit
        />
        <van-button @click="OnModifysignature" color="#7232dd">确定</van-button>
      </div>
    </van-popup>
    <!--end 编辑签名 -->
  </div>
</template>
<script>
//引入上传到腾讯云 封装的方法
import { upload } from "../../utils/Fileupload";

export default {
  data() {
    return {
      fileList: [],
      info: {
        Account: "",
        userImg: "",
        Nickname: "",
        Birthday: "",
        Gender: "",
        Signature: "",
      },
      dialogshow: false,
      useName: "",
      options: [
        {
          name: "我的消息",
          icon: "	https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/messages.png",
        },
        {
          name: "客服小爱",
          icon: "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/kefuicon.png",
        },
        {
          name: "回到首页",
          icon: "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/infoHome.png",
        },
        {
          name: "购物车",
          icon: "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/info_cat.png",
        },
        { name: "二维码", icon: "qrcode" },
      ],
      showShare: false,
      sheetshow: false,
      actions: [{ name: "男" }, { name: "女" }],
      calendarshow: false,
      popupshow: false,
    };
  },
  mounted() {},
  created() {
    this.getUserInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //上传头像前置处理
    beforeRead(file) {
      // console.log(file);
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$toast("只能上传图片！");
        return false;
      }
      return true;
    },
    //上传图片
    afterRead(file) {
      let url = "MobileShop/";
      upload.uploadChange(file, url);
      this.ModifyUserProfile(file.file.name);
    },
    //修改头像
    async ModifyUserProfile(img) {
      const { data: res } = await this.$http.post("ModifyUserProfile", {
        userImg: img,
        UserID: this.$store.state.emailLogin[0].userID,
      });
      this.ModifyOthersProfile(img);
      this.getUserInfo();
      if (res.status === 200) {
        this.getUserEdit();
      }
    },
    //copy
    copy() {},
    //获取用户信息 用来刷新修改后的数据
    async getUserInfo() {
      try {
        const { data: res } = await this.$http.get("queryUserinfo", {
          params: { id: this.$store.state.emailLogin[0].userID },
        });
        console.log(res);
        res.data.forEach((item) => {
          item.userImg = this.iconUrl + item.userImg;
        });
        this.info.Account = res.data[0].Account;
        this.info.userImg = res.data[0].userImg;
        this.info.Nickname = res.data[0].Nickname;
        this.info.Birthday = res.data[0].Birthday;
        this.info.Gender = res.data[0].Gender;
        this.info.Signature = res.data[0].Signature;
        this.useName = res.data[0].Nickname;
      } catch (error) {
        this.$toast("数据异常!");
      }
    },
    //获取用户数组修改vuex的值
    async getUserEdit() {
      const { data: res } = await this.$http.get("queryUserinfo", {
        params: { id: this.$store.state.emailLogin[0].userID },
      });
      let arr = [
        {
          userID: res.data[0].UserID,
          email: res.data[0].email,
          Account: res.data[0].Account,
          Nickname: res.data[0].Nickname,
          userImg: res.data[0].userImg,
          token: res.data[0].token,
        },
      ];
      this.$store.commit("setUser", arr);
    },
    //修改其他头像
    async ModifyOthersProfile(img) {
      let data = {
        userImg: img,
        id: this.$store.state.emailLogin[0].userID,
        userImg2: img,
        id2: this.$store.state.emailLogin[0].userID,
        userImg3: img,
        id3: this.$store.state.emailLogin[0].userID,
        userImg4: img,
        id4: this.$store.state.emailLogin[0].userID,
        userImg5: img,
        id5: this.$store.state.emailLogin[0].userID,
      };
      const { data: res } = await this.$http.post("ModifyOthersProfile", data);
      console.log(res);
    },
    //修改用户
    async Confirmation() {
      if (this.useName.length >= 4 && this.useName.length <= 6) {
        const { data: res } = await this.$http.post("ModifyUserNickname", {
          Nickname: this.useName,
          UserID: this.$store.state.emailLogin[0].userID,
        });
        this.ModifyOthersNickname();
        this.getUserInfo();
        if (res.status === 200) {
          this.getUserEdit();
          this.dialogshow = false;
        }
      } else {
        this.$toast("昵称格式不正确！");
      }
    },
    //修改其他昵称
    async ModifyOthersNickname() {
      let data = {
        user: this.useName,
        id: this.$store.state.emailLogin[0].userID,
        user2: this.useName,
        id2: this.$store.state.emailLogin[0].userID,
        user3: this.useName,
        id3: this.$store.state.emailLogin[0].userID,
        user4: this.useName,
        id4: this.$store.state.emailLogin[0].userID,
        user5: this.useName,
        id5: this.$store.state.emailLogin[0].userID,
      };
      const { data: res } = await this.$http.post("ModifyOthersNickname", data);
      console.log(res);
    },
    //修改昵称框的关闭事件 阻止默认关闭
    onBeforeClose(action, done) {
      if (action === "confirm") {
        return done(false);
      } else {
        return done();
      }
    },
    //修改用户性别
    async onChangesex(action) {
      const { data: res } = await this.$http.post("ModifyUserGender", {
        Gender: action.name,
        UserID: this.$store.state.emailLogin[0].userID,
      });
      this.getUserInfo();
      console.log(res);
    },
    //生日日期处理
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    //选择日期修改生日
    async onConfirm(date) {
      this.calendarshow = false;
      this.info.Birthday = this.formatDate(date);
      const { data: res } = await this.$http.post("ModifyUserBirthday", {
        Birthday: this.formatDate(date),
        UserID: this.$store.state.emailLogin[0].userID,
      });
      this.getUserInfo();
    },
    //修改签名
    async OnModifysignature() {
      const { data: res } = await this.$http.post("ModifyUserSignature", {
        Signature: this.info.Signature,
        UserID: this.$store.state.emailLogin[0].userID,
      });
      this.getUserInfo();
      this.popupshow = false;
    },
    //分享面板选项点击事件
    onSelect() {},
  },
};
</script>
<style lang="less" scoped>
.info-bar_2 {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
  .van-nav-bar {
    background-color: #96bbce;
  }
}
.main {
  background-color: #f2f2f2;
  width: 100%;
  // height: 100%;
  position: absolute;
  bottom: 0;
  top: 35px;
  left: 0;
}
.Head_area {
  margin-top: 10px;
  background: white;
  .van-image__img {
    border-radius: 50%;
  }
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .top_ar {
    width: 120px;
    margin: 0 auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin-top: 10px;
    }
  }
}
.userInfo {
  .userAccount {
    margin-left: 40px;
    color: #9e9e9e;
  }
  .custom-title {
  }
}
.editnamebox {
  padding: 10px;
  .name_tip {
    font-size: 12px;
    color: #949494;
    margin-top: 10px;
  }
}
.Gender {
  width: 15px !important;
  height: 15px !important;
  margin-left: 4px;
}
.Signaturebox {
  padding: 10px;
  margin-top: 45px;
  button {
    width: 100%;
  }
}
</style>